<template>
  <div class="app-container">
    <div>
      <!--根据条件查询教师和添加教师-->
      <span class="search-label" style="margin-left: 10px">教师名字:</span>
      <el-input v-model="name" style="width: 200px; margin-left: 10px" placeholder="请输入教师名字" @keyup.native="typeSelect(name,value)" />
      <span class="search-label" style="margin-left: 10px">教师类别:</span>
      <el-select v-model="value" style="width: 120px; margin-left: 10px" @change="typeSelect(name,value)">
        <el-option
          v-for="(item,index) in options"
          :key="index"
          :label="item"
          :value="index"
        />
      </el-select>
      <el-button type="primary" style="margin-left: 20px" icon="el-icon-edit" @click="insertTeacher">新增</el-button>
      <el-dialog :visible.sync="dialogFormVisible">
        <el-form
          :model="teacherForm"
          ref="dataForm"
          label-position="left"
          label-width="90px"
          style="width: 60%; margin-left:20%;"
        >
          <el-form-item label="教师ID" prop="teacherId">
            <el-input v-model="teacherForm.teacherId" :disabled="submitDisabled"></el-input>
          </el-form-item>
          <el-form-item label="教师名" prop="name">
            <el-input v-model="teacherForm.name"></el-input>
          </el-form-item>
          <el-form-item label="学院" prop="college">
            <el-select v-model="teacherForm.college">
              <el-option
                v-for="(item,index) in collegeOptions"
                :key="index"
                :label="item"
                :value="index"
              />
            </el-select>
          </el-form-item>
          <el-form-item label="职位" prop="level">
            <el-select v-model="teacherForm.level" @change="insertLevel()">
              <el-option
                v-for="(item,index) in options"
                :key="index"
                :label="item"
                :value="index"
                v-if="index == 1||index == 2||index == 3"
              />
            </el-select>
          </el-form-item>
          <el-form-item label="联系方式" prop="phone">
            <el-input v-model="teacherForm.phone"></el-input>
          </el-form-item>
          <el-form-item label="密码" prop="password">
            <el-input v-model="teacherForm.password" disabled></el-input>
          </el-form-item>

        </el-form>
        <div style="text-align:center" slot="footer" class="dialog-footer">
          <el-button @click="dialogFormVisible = false;getData()">取消</el-button>
          <el-button type="primary" @click=" createData();getData() ">确定</el-button>
        </div>
      </el-dialog>


      <el-dialog :visible.sync="updateFormVisible">
        <el-form
          :model="updateForm"
          ref="dataForm"
          label-position="left"
          label-width="90px"
          style="width: 60%; margin-left:20%;"
        >
          <el-form-item label="教师ID" prop="teacherId">
            <el-input v-model="updateForm.teacherId" disabled></el-input>
          </el-form-item>
          <el-form-item label="教师名" prop="name">
            <el-input v-model="updateForm.name"></el-input>
          </el-form-item>
          <el-form-item label="学院" prop="college">
            <el-select v-model="updateForm.college">
              <el-option
                v-for="(item,index) in collegeOptions"
                :key="index"
                :label="item"
                :value="index"
              />
            </el-select>
          </el-form-item>
          <el-form-item label="职位" prop="level">
            <el-select v-model="updateForm.level" @change="insertLevel()">
              <el-option
                v-for="(item,index) in options"
                :key="index"
                :label="item"
                :value="index"
                v-if="index == 1||index == 2||index == 3"
              />
            </el-select>
          </el-form-item>
          <el-form-item label="联系方式" prop="phone">
            <el-input v-model="updateForm.phone"></el-input>
          </el-form-item>
          <el-form-item label="密码" prop="password">
            <el-input v-model="updateForm.password"></el-input>
          </el-form-item>

        </el-form>
        <div style="text-align:center" slot="footer" class="dialog-footer">
          <el-button @click="updateFormVisible = false; getData()">取消</el-button>
          <el-button type="primary" @click="updateData(); getData()">确定</el-button>
        </div>
      </el-dialog>

      <!--      <el-button class="query_btn" style="margin-left: 20px" type="primary" @click="goSearch(name,value)">查询</el-button>-->
    </div>

    <el-table
      :data="list"
      border
      fit
      highlight-current-row
      style="margin-top: 10px"
    >
      <el-table-column align="center" label="序号">
        <template slot-scope="scope">
          {{ scope.$index + 1 }}
        </template>
      </el-table-column>

      <el-table-column label="教师ID">
        <template slot-scope="scope">
          {{ scope.row.teacherId }}
        </template>
      </el-table-column>

      <el-table-column label="教师名">
        <template slot-scope="scope">
          {{ scope.row.name }}
        </template>
      </el-table-column>

      <el-table-column label="学院">
        <template slot-scope="scope">
          {{ scope.row.college }}
        </template>
      </el-table-column>

      <el-table-column label="职位">
        <template slot-scope="scope">
          {{ scope.row.level }}
        </template>
      </el-table-column>

      <el-table-column label="联系方式">
        <template slot-scope="scope">
          {{ scope.row.phone }}
        </template>
      </el-table-column>

      <el-table-column label="操作（ 修改 / 删除 ）">
        <template slot-scope="scope">
          <el-button-group style="width: 100%">
            <el-button type="primary" icon="el-icon-edit" style="width: 50%" @click="update(scope.row)"></el-button>
            <el-button type="danger" icon="el-icon-delete" style="width: 50%" @click="deleteTeacher(scope.row)"></el-button>
          </el-button-group>
        </template>
      </el-table-column>

    </el-table>
  </div>
</template>

<script>
import {
  deleteTeacher,
  deleteTeacherById,
  getColleges,
  getLevels,
  getTeacherList,
  insertTeacher,
  updateTeacher
} from '@/api/teachers'
import {RSAUtil} from "@/utils/RSAUtil";

export default {
  data() {
    return {
      submitDisabled: false,
      collegeOptions: [],
      options: [],
      list: [],
      srclist: [],
      value: '',
      name: '',
      dialogFormVisible: false,
      updateFormVisible: false,
      teacherForm: {
        teacherId: "",
        name: "",
        college: "",
        level: "",
        phone: "",
        password: "123456",
      },
      updateForm: {
        teacherId: "",
        name: "",
        college: "",
        level: "",
        phone: "",
        password: "",
      },
    }
  },
  created() {
    getLevels().then(response => {
      console.log(response.data)
      this.options = response.data
      this.options.shift()
      this.options.unshift('全部')
      this.value = this.options[0]
    }).catch(error => {
      console.log(error)
    })
    this.getData()
    getColleges().then(res =>{
        console.log(res.data)
        this.collegeOptions = res.data
      }).catch(error =>{
        console.log(error)
      })
  },
  methods: {
    getData() {
      this.listLoading = true
      getTeacherList().then(response => {
        this.srclist = this.list = response.data
        this.listLoading = false
      }).catch(error => {
        this.listLoading = false
        console.log(error)
      })
    },


    insertTeacher(){
      this.dialogFormVisible = true;
    },


    deleteTeacher(row){
      console.log(row);
      this.$confirm(`确认是否删除姓名为：${row.name}  的用户？`, '删除', {
        confirmButtonText: '确定',
      }).then(() => {

        deleteTeacherById(row.teacherId)
          .then(response =>{//删除成功
              this.$message({
                type: 'success',
                message: '删除成功!'
              });
            this.$router.go(0)
          }).catch(error=>{
            console.log(error)
        })
      })
    },


    createData(){
      const params = this.teacherForm;
      insertTeacher(params).then(response => {
        console.log(response.data)
      })
      .catch(error => {
        console.log(error)
      });
      this.dialogFormVisible = false;
      this.getData()
    },


    updateData(){
      const params = this.updateForm;
      updateTeacher(params).then(response => {
        console.log(response.data)
      })
        .catch(error => {
          console.log(error)
        });
      this.updateFormVisible = false;
      this.getData()
    },


    insertLevel() {
      getLevels().then(response => {
        console.log(response.data)
        this.options = response.data
        this.options.shift()
        this.options.unshift('全部')
        this.value = this.options[0]
      }).catch(error => {
        console.log(error)
      })
    },


    update(row) {
      this.updateForm = row;
      this.updateFormVisible = true;
    },


    typeSelect(name, value) {
      this.list = this.srclist.filter((v) => {
        if (name.trim() === '' || name === undefined || name == null) {
          if (this.options[value] === '全部') {
            return true
          } else {
            return v.level === this.options[value]
          }
        } else {
          if (this.options[value] === '全部') {
            return v.name.indexOf(name) >= 0
          } else {
            return v.name.indexOf(name) >= 0 && v.level === this.options[value]
          }
        }
      })
    }
  }
}
</script>
